<template>
    <div>
        <div
            v-for="(item, index) in spotInfo"
            :key="index"
            :class="item.status"
        >
            <div
                class="pin"
                :style="{ left: item.left + 'px', top: item.top + 'px' }"
                @click="showTip(item.company_info)"
            ></div>
            <div
                class="pulse"
                :style="{ left: item.left + 'px', top: item.top + 'px' }"
            ></div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['spotInfo'],
    data () {
        return {
            // spotInfo: {
            // status: 'red',
            // left: 869,
            // top: 478
            // },
            chosen: null
        }
    },
    mounted () {
        // console.log('当前渲染坐标点信息: ',this.spotInfo);
    },
    /* 
        "_id": "6042528f183c7c5df336cf6b",
        "devices_id": "864480047504948",
        "company_name": "test", // 企业名
        "contacts": "test1", // 联系人
        "phone": "13100000000",
        "area_id": "120103003006",
        "address": "宏佰百货首层",
        "scale": "m", // 规模值 ’l’：大 ，‘m’：中 ， ’s’：小
        "operating_state": "1",
        "cuisine": "1", // 1：鲁菜 ，2：川湘菜，3：粤菜，4：淮扬菜，5：西餐，6：烧烤，7：快餐，8：其它
        "monitoring_level": "1", // 监控级别 g:一般，p：重点
        "soot": 0, // soot > 1 是超标; 0.8 <soot <1 是预警; 剩下就是正常的;
        "non_methane": 0, // 非甲烷总烃值
        "particulate": 0,
        "monitoring_status": 0, // 监控仪状态 ‘0’离线， ‘1’在线
        "purifier_status": 0, // 净化器状态 0：关闭，1：开启
        "fen_status": 0, // 排风机状态 0:关闭; 1:开启
        "is_bind": 1,
        "ctime": 1614959247,
        "baidu_gps": "114.2732946,22.6918052",
        "allocation_time": 1615983276,
        "user_id": { "$oid": "60431a250c6eec7d4a20b262" },
        "bind_time": 1614967220,
        "company_ref_id": { "$oid": "60427127ece2bf281f199275" },
        "door_photo_url": "",
        "daily_patrol_status": 0
    */
    methods: {
        showTip (item) {
            this.$parent.$parent.mapTipShow = true
            this.chosen = {
                class: item.soot <= 0.8 ? `green` : item.soot > 0.8 && item.soot < 1 ? 'orange' : 'red',
                status: item.soot <= 0.8 ? `正 常` : item.soot > 0.8 && item.soot < 1 ? '预 警' : '超 标',
                name: item.company_name, // 公司名称
                addr: item.address, // 地址
                code: item.area_id, // 邮编
                phone: `${item.phone}(${item.contacts})`, // 电话
                size: item.scale == 's' ? '小' : item.scale == 'm' ? '中' : '大', // 企业规模
                category: (function (val) {
                    let cuisine = '';
                    switch (val) {
                        case '1':
                            cuisine = '鲁菜'
                            break;
                        case '2':
                            cuisine = '川湘菜'
                            break;
                        case '3':
                            cuisine = '粤菜'
                            break;
                        case '4':
                            cuisine = '淮扬菜'
                            break;
                        case '5':
                            cuisine = '西餐'
                            break;
                        case '6':
                            cuisine = '烧烤'
                            break;
                        case '7':
                            cuisine = '快餐'
                            break;
                        case '8':
                            cuisine = '其它'
                            break;
                        default:
                            cuisine = '其它';
                            break;
                    }
                    return cuisine
                }(item.cuisine)), // 菜系
                level: item.monitoring_level == 'g' ? '一般' : item.monitoring_level == 'p' ? '重点' : '-', // 监控级别
                soot: item.soot, // 油烟浓度
                keliwu: '0.08', // 颗粒物浓度
                feijiawan: item.non_methane || '0.08', // 非甲烷总烃
                jiankongyi: item.monitoring_status == 1 ? '在线' : '离线', // 监控仪状态
                jinghuaqi: item.purifier_status == 1 ? '开启' : '离线', // 净化器状态
                fengshan: item.fen_status == 1 ? '开启' : '离线', // 排风机状态
            }
            this.$parent.$parent.currentChosenSpot = this.chosen
        }
    },
    // watch:{
    //     spotInfo:function(nv,ov){
    //         console.log('位置产生变化!!!');
    //     }
    // }
}
</script>

<style lang="less" scoped>
.pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #f2e7d1;
    position: fixed;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    margin-top: 5px;
    z-index: 5;
}
.pin:after {
    content: "";
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #2f2f2f;
    position: fixed;
    border-radius: 50%;
}
.pin:hover {
    cursor: pointer;
}
.pulse {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    height: 120px;
    width: 30px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -50px 0px 0px -20px;
    transform: rotateX(55deg);
    z-index: 4;
    // background: linear-gradient(
    //     0deg,
    //     rgba(255, 165, 0, 0.2),
    //     rgba(255, 165, 0, 0.1),
    //     rgba(255, 165, 0, 0)
    // );
    background: unset;
    transition: background 0.3s;
}
.pulse::before {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    bottom: -12px;
    transform: translateX(-50%);
    margin-left: -5px;
    position: fixed;
    /* margin: -13px 0 0 -13px; */
    animation: pulsate 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    filter: alpha(opacity=0);
    box-shadow: 0 0 2px 2px rgb(141, 129, 107);
    animation-delay: 2s;
}
.pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    bottom: -12px;
    position: fixed;
    margin-left: -5px;
    animation: pulsate 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    filter: alpha(opacity=0);
    box-shadow: 0 0 2px 2px orange;
    animation-delay: 1.1s;
}
.pulse:hover {
    background: linear-gradient(
        0deg,
        rgba(255, 165, 0, 0.2),
        rgba(255, 165, 0, 0.1),
        rgba(255, 165, 0, 0)
    );
}
@-moz-keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        filter: none;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@-webkit-keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        filter: none;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@-o-keyframes pulsate {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        filter: none;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
/* 以上为基础样式和动画效果 */

/* 
blue: (118,190,245),(53,117,173)
green: (179,231,84),(132,155,79)
orange: (218,166,45),(231,201,129)
red: (114,35,28),(250,92,77)
gray: (119,118,118),(209,209,209)
*/

/* 
blue: (#76bef5,#3575ad)
green: (#aae754,#849b4f)
orange: (#daa62d,#e7c981)
red: (#72231c,#fa5c4d)
gray: (#777676,#d1d1d1)
*/

/* 蓝色 */
.blue {
    .pulse::before,
    .pulse::after {
        box-shadow: 0 0 2px 2px #3d82be;
    }
    .pulse:hover {
        background: linear-gradient(
            0deg,
            rgba(53, 117, 173, 0.6),
            rgba(53, 117, 173, 0.4),
            rgba(53, 117, 173, 0)
        );
        cursor: pointer;
    }
    .pin:hover ~ .pulse {
        background: linear-gradient(
            0deg,
            rgba(53, 117, 173, 0.6),
            rgba(53, 117, 173, 0.4),
            rgba(53, 117, 173, 0)
        );
        cursor: pointer;
    }
}

/* 绿色 */
.green {
    .pulse::before,
    .pulse::after {
        box-shadow: 0 0 2px 2px #aae754;
    }
    .pulse:hover {
        background: linear-gradient(
            0deg,
            rgba(132, 155, 79, 0.6),
            rgba(132, 155, 79, 0.4),
            rgba(132, 155, 79, 0)
        );
        cursor: pointer;
    }
    .pin:hover ~ .pulse {
        background: linear-gradient(
            0deg,
            rgba(132, 155, 79, 0.6),
            rgba(132, 155, 79, 0.4),
            rgba(132, 155, 79, 0)
        );
        cursor: pointer;
    }
}

/* 红色 */
.red {
    .pulse::before,
    .pulse::after {
        box-shadow: 0 0 2px 2px #fa5c4d;
    }
    .pulse:hover {
        background: linear-gradient(
            0deg,
            rgba(250, 92, 77, 0.4),
            rgba(250, 92, 77, 0.2),
            rgba(250, 92, 77, 0)
        );
        cursor: pointer;
    }
    .pin:hover ~ .pulse {
        background: linear-gradient(
            0deg,
            rgba(250, 92, 77, 0.4),
            rgba(250, 92, 77, 0.2),
            rgba(250, 92, 77, 0)
        );
        cursor: pointer;
    }
}

/* 橙色 */
.orange {
    .pulse::before,
    .pulse::after {
        box-shadow: 0 0 2px 2px #e7c981;
    }
    .pulse:hover {
        background: linear-gradient(
            0deg,
            rgba(231, 201, 129, 0.6),
            rgba(231, 201, 129, 0.4),
            rgba(231, 201, 129, 0)
        );
        cursor: pointer;
    }
    .pin:hover ~ .pulse {
        background: linear-gradient(
            0deg,
            rgba(231, 201, 129, 0.6),
            rgba(231, 201, 129, 0.4),
            rgba(231, 201, 129, 0)
        );
        cursor: pointer;
    }
}

/* 灰色 */
.gray {
    .pulse::before,
    .pulse::after {
        box-shadow: 0 0 2px 2px #777676;
    }
    .pulse:hover {
        background: linear-gradient(
            0deg,
            rgba(209, 209, 209, 0.6),
            rgba(209, 209, 209, 0.4),
            rgba(209, 209, 209, 0)
        );
        cursor: pointer;
    }
    .pin:hover ~ .pulse {
        background: linear-gradient(
            0deg,
            rgba(209, 209, 209, 0.6),
            rgba(209, 209, 209, 0.4),
            rgba(209, 209, 209, 0)
        );
        cursor: pointer;
    }
}
</style>